<script setup>
import { computed } from "vue";

const props = defineProps({
  orderDetails: {
    type: Object,
    required: true,
    default: () => ({}),
  },
  goodsDetails: {
    type: Object,
    required: true,
    default: () => ({}),
  },
});

// 计算剩余验收时间
const remainingTime = computed(() => {
  const now = new Date();
  const acceptanceTime = props.orderDetails.acceptanceTime;
  const deliveryTime = new Date(
    new Date(acceptanceTime).getTime() + 7 * 24 * 60 * 60 * 1000
  );
  const diffTime = deliveryTime.getTime() - now.getTime();
  // 转换为天、小时、分钟
  const days = Math.floor(diffTime / (24 * 60 * 60 * 1000));
  const hours = Math.floor(
    (diffTime % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000)
  );
  const minutes = Math.floor((diffTime % (60 * 60 * 1000)) / (60 * 1000));
  return `${days}天${hours}小时${minutes}分钟`;
});
</script>

<template>
  <div class="status">
    <img class="icon" src="@/assets/order-jx.png" alt="" />
    <div class="info">
      <h3 class="title">待 {{ orderDetails.nickName }} 确认验收</h3>
      <p class="confirm-list">
        请提醒买家确认验收，如买家未验收，系统会在
        <span>{{ remainingTime }}</span>
        后默认验收，钱款将打入你的账户。如果有问题，可以联系平台顾问。
      </p>
    </div>
  </div>
</template>

<style scoped lang="scss">
.status {
  display: flex;
}
.icon {
  flex: 0 0 24px;
  height: 24px;
  margin-right: 8px;
  position: relative;
  top: 2px;
}
.info {
  flex: 1;
  .title {
    font-size: 20px;
    color: #191e28;
    margin-bottom: 12px;
  }
  .confirm-list {
    color: rgba(25, 30, 40, 0.48);
    line-height: 24px;
    span {
      color: #1dbf73;
    }
  }
}
</style>